<template>
    <view class="setting-content-box">
        <view class="user-head">
            <view class="user-ava">
                <image :src="avatarUrl" class="user-head-image"></image>
            </view>
            <view class="user-name-text">
                <text>{{nickName}}</text>
            </view>
        </view>
        <view class="uni-list music-box">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    <image src="../../static/images/fores.png" class="list-icon"></image>
                    <text class="list-text">白噪音</text>
                </view>
                <view class="uni-list-cell-db">
                    <picker @change="musicArrayChange" :value="index" :range="musicArray">
                        <view class="uni-input">{{musicArray[index]}} <uni-icons type="forward" size="16"></uni-icons></view>
                    </picker>
                </view>
            </view>
        </view>
        <view class="set-more-content-box">
            <text class="set-title">时长设置(分钟)</text>
            <view class="set-track-content">
                <view class="set-track-title">工作</view>
                <view class="set-track-slider">
                    <slider :value="workTime" show-value max="60" @change="workTrackChange"></slider>
                </view>
                <view class="set-track-title">休息</view>
                <view class="set-track-slider">
                    <slider :value="restTime" show-value max="30" @change="restTrackChange"></slider>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {uniIcons} from '@dcloudio/uni-ui';

export default {
    name: "setting",
    components:{uniIcons},
    data(){
        return {
            avatarUrl:"",
            nickName:"",
            musicArray:["静音","林间","雨声","田野"],
            musicUrl:[
                'http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_55670028&response=res&type=convert_url&',
                'http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_89130558&response=res&type=convert_url&',
                'http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_147235538&response=res&type=convert_url&'
            ],
            index:0,
            workTime:30,
            restTime:5,
            innerAudioContext:null
        }
    },
    onLoad(query) {
        uni.getProvider({
            service:'oauth',
            success:(res)=>{
                const provider = res.provider;
                uni.login({
                    provider,
                    success:(res)=>{
                        uni.getUserInfo({
                            provider,
                            success:(res)=>{
                                const userInfo = res.userInfo;
                                this.avatarUrl = userInfo.avatarUrl;
                                this.nickName = userInfo.nickName;
                            }
                        })
                    }
                })
            }
        });
        this.workTime = uni.getStorageSync('workTime') || 30;
        this.restTime = uni.getStorageSync('restTime') || 5;

    },
    onShareAppMessage: function (res) {
        if (res.from === 'button') {
            return {
                title: '管理时间，保持专注！一起来提高学习工作效率。',
                path: '/pages/index/index',
                imageUrl: '/image/about.png'
            }
        }
    },
    methods:{
        musicArrayChange(e){
            this.index= e.detail.value;
            if (this.index === 0) {
                this.innerAudioContext.destroy();
            } else {
                if (this.innerAudioContext !== null) {
                    this.innerAudioContext.destroy();
                }
                const innerAudioContext = uni.createInnerAudioContext();
                this.innerAudioContext = innerAudioContext;
                innerAudioContext.src = this.musicUrl[this.index];
                innerAudioContext.autoplay = true;
                innerAudioContext.loop = true;
                innerAudioContext.onPlay(()=>{
                    console.log('开始播放')
                });
                innerAudioContext.onError((res)=>{
                    console.log(res)
                });
            }
        },
        workTrackChange(e){
            uni.setStorageSync('workTime',e.detail.value);
        },
        restTrackChange(e){
            uni.setStorageSync('restTime',e.detail.value);
        }
    }
}
</script>

<style scoped>
@import "setting.css";
</style>